<!-- 模板 -->
<template>
  <div class="enroll">
      <div class="box">
        <div class="btn">
            <!-- <div style="margin-top:10px">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button>
            </div> -->
            <div style="margin-top:10px">
                <el-form :inline="true" :model="params" size="small" label-width="80px"  >
                    <el-form-item label="联系方式:">
                        <el-input v-model="params.phone" placeholder="输入手机号" clearable @clear="search" />
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input v-model="params.name"  placeholder="输入姓名" clearable  @clear="search" />
                    </el-form-item>
                    <el-form-item label="报名课程:">
                        <el-input v-model="params.courseName" placeholder="输入课程名称" clearable @clear="search"/>
                    </el-form-item>
                    <el-button
                        style="margin-left: 20px;"
                        type="primary"
                        size="small"
                        icon="el-icon-search"
                        @click="search"
                        >
                        搜索
                    </el-button>
                    <el-button icon="el-icon-refresh" size="small" @click="resetParams">
                    重置
                    </el-button>
                <!-- <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button> -->
                </el-form>
            </div>
        </div>
        <el-card>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column prop="name" label="名字" align="center" width="180">
                    <!-- <template slot-scope="scope">
                        <el-link   @click="chakan(scope.row)">{{scope.row.name}}</el-link>
                    </template> -->
                </el-table-column>
                <el-table-column prop="phone" label="手机号" align="center" width="180"> </el-table-column>
                <el-table-column prop="courseName" label="课程名字" align="center" width="180"> </el-table-column>
                <el-table-column prop="price" label="金额" align="center" width="120"> </el-table-column>
                <el-table-column prop="createTime" label="报名时间" align="center" width="180"> </el-table-column>
                <el-table-column prop="payStatus" label="支付状态" align="center" width="180">
                    <template slot-scope="scope">
                        {{scope.row.payStatus ==0?'未支付':'已支付'}}
                    </template>
                </el-table-column>
                <el-table-column prop="payMode" label="支付方式" align="center" width="180">
                    <template slot-scope="scope">
                        {{scope.row.payStatus ==1?'微信':'———'}}
                    </template>
                </el-table-column>
                <el-table-column prop="payTime" label="支付时间" align="center" width="180"> </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="180">
                    <template slot-scope="scope">
                        {{scope.row.status ==0?'未联系':'已联系'}}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" width="280"> </el-table-column>
                <el-table-column  label="操作" align="center" fixed="right" width="260">
                    <template slot-scope="scope">
                        <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                        <el-button  type="primary" size="small" icon="el-icon-circle-plus-outline"  @click="addSelect(scope.row)" plain>添加备注</el-button>
                        <!-- <el-button @click="handleDetClick(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删 除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <pagination
            v-show="newsTotal >0"
            :total="newsTotal"
            :page.sync="params.pageNum"
            :limit.sync="params.pageSize"
            @pagination="getList"
            />
      </div>

      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose">
<el-form :label-position="labelPosition" label-width="120px" :model="form" :rules="rules" ref="form">
    <el-form-item label="名字" prop="name" >
        <el-input v-model="form.name" style="width:280px" disabled></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone" >
        <el-input v-model="form.phone" style="width:280px" disabled></el-input>
    </el-form-item>
    <el-form-item label="课程名字" prop="course" >
        <el-input v-model="form.courseName" style="width:280px" disabled> </el-input>
    </el-form-item>
    <!-- <el-form-item label="金额" prop="payMoney" >
        <el-input v-model.number="form.payMoney" style="width:280px"></el-input>
    </el-form-item> -->
    <!-- <el-form-item label="支付时间" prop="payTime" >
        <el-date-picker
            v-model="form.payTime"
            type="date"
            value-format="yyyy-MM-dd hh:mm:ss"
            placeholder="选择日期">
        </el-date-picker>
    </el-form-item> -->
    <el-form-item label="报名时间" prop="createTime" >
        <el-date-picker
            v-model="form.createTime"
            type="date"
            value-format="yyyy-MM-dd hh:mm:ss"
            placeholder="选择日期"
            disabled>
        </el-date-picker>
    </el-form-item>
    <el-form-item label="支付方式" prop="payment" >
        <el-select v-model="form.payment" placeholder="请选择" disabled>
            <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <!-- <el-input v-model="form.payment" style="width:280px"></el-input> -->
    </el-form-item>
    <el-form-item label="状态" prop="status" >
        <!-- <el-input v-model.number="form.status" style="width:280px"></el-input> -->
        <el-select v-model="form.status" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="textarea">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"> </el-input>
    </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit" >确 定</el-button>
  </span>
</el-dialog>


    <el-dialog title="备注查看" :visible.sync="cateOpen" width="35%">
        <el-dialog
            width="30%"
            title="新增"
            :visible.sync="innerVisible"
            append-to-body>
            <el-form :inline="true" :model="form1" >
                <el-form-item label="备注" prop="textarea">
                    <el-input type="textarea"  placeholder="请输入内容" v-model="form1.remark" style="width:320px"> </el-input>
                </el-form-item>
            </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addRemark">确 定</el-button>
                </span>
        </el-dialog>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="add" style="margin-bottom:10px">添加</el-button>
        <el-table :data="remarkData" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column>
            <el-table-column prop="remark" label="内容" align="center"> </el-table-column>
        </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cateOpen =false">取 消</el-button>
        <el-button type="primary" @click="cateOpen =false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getEnrollList,getEnrollDsc,getEnrollUpdate,getRemarkList,getUserUpdate} from "@/api/certificate/index";
export default {
  name: '',
  data () {
    return {
        tableData:[],
        remarkData:[],
        labelPosition: 'right',
        dialogVisible:false,
        cateOpen:false,
        innerVisible:false,
        loading:false,
        title:'',
        form:{
            remark:[],
        },
        form1:{
            userCourseId:undefined,
            remark:'',
            status:'',
        },
        rules:{
        name: [
            { required: true, message: "请填写名字", trigger: "blur" }
        ],
        phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/,message: '请输入正确的手机号'},
        ],
        course: [
            { required: true, message: "请填写课程名称", trigger: "blur" }
        ],
        payMoney: [
            { required: true, message: "请输入金额", trigger: "blur" }
        ],
        createTime: [
            { required: true, message: '请选择报名时间', trigger: 'blur' },
          ],
        payment: [
            { required: true, message: '请选择支付方式', trigger: 'blur' },
          ],
        },
        options: [{
          value: 1,
          label: '已联系'
        }, {
          value: 0,
          label: '未联系'
        }],
        options1: [{
          value: '1',
          label: '微信'
        }],
        params:{
            pageNum: 1,
            pageSize: 10,
        },
        newsTotal: 0,
        number: [
        {
          index: 0,
          remark: "",
        },
      ],
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
      addRemark(){
        getEnrollUpdate(this.form1).then(res =>{
            if(res.code == 200){
                // console.log(res);
                this.$message.success("保存成功")
                this.innerVisible = false
                // this.cateOpen = false
                getRemarkList(this.form1.userCourseId).then(res=>{
                    if(res.code == 200){
                        this.remarkData = res.rows
                    // console.log(res);
                    }
                })
            }
        })
      },
      add(){
          this.form1.remark = ''
          this.innerVisible = true
      },
      addSelect(row) {
        //   console.log(row);
        this.form1.userCourseId = row.id
          this.cateOpen = true
          getRemarkList(row.id).then(res=>{
              if(res.code == 200){
                  this.remarkData = res.rows
                // console.log(res);
              }
          })
    },
    resetParams() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
      };
      this.search();
    },
    search() {
      this.$set(this.params, "pageNum", 1);
    //   this.paramsFlag = 0;
      this.getList();
    },
    handleClose(){
        this.dialogVisible = false
    },
    //   提交按钮
    onSubmit(){
        getUserUpdate(this.form).then(res =>{
            if(res.code == 200){
                this.dialogVisible = false
                this.$message.success("修改成功")
                this.getList()
            }
        })
    },
    //   删除按钮
    handleDetClick(){},
    //   修改按钮
    handleUpdateClick(row){
        this.form = row
        this.dialogVisible = true
    },

    // 查看按钮
    chakan(){},
    // 获取所有
    getList(){
        this.loading = true;
        getEnrollList(this.params).then(res=>{
            if(res.code == 200){
                this.tableData = res.rows;
                this.newsTotal = res.total;
                this.loading = false;
            }
        })
    },
  },
  created () {
      this.getList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    .btn{
        margin: 10px;
        display: flex;
        // align-items: center;
    }
}
</style>
